<template>
  <el-dialog
    :title="title"
    :visible.sync="dialogFormVisible"
    width="800px"
    @close="close"
  >
    <div class="roleManagement-container">
      <vab-query-form>
        <vab-query-form-left-panel :span="20">
          <el-form :inline="true" :model="queryForm" @submit.native.prevent>
            <el-form-item>
              <el-input
                v-model.trim="queryForm.keyword"
                placeholder="请输入查询条件"
                clearable
              />
            </el-form-item>
            <el-form-item>
              <el-select v-model="value" filterable placeholder="按产品筛选">
                <el-option
                  v-for="item in options"
                  :key="item.id"
                  :label="item.label"
                  :value="item.id"
                ></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                icon="el-icon-search"
                type="primary"
                @click="queryData"
              >
                查询
              </el-button>
            </el-form-item>
          </el-form>
        </vab-query-form-left-panel>
        <vab-query-form-right-panel :span="4"></vab-query-form-right-panel>
      </vab-query-form>

      <el-table
        ref="registTable"
        v-loading="listLoading"
        :data="list"
        :element-loading-text="elementLoadingText"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
        ></el-table-column>
        <el-table-column prop="name" label="所属产品"></el-table-column>
        <el-table-column prop="tagnumber" label="位号信息"></el-table-column>
        <el-table-column prop="realdata" label="实时值"></el-table-column>
        <el-table-column prop="ctime" label="更新时间"></el-table-column>
      </el-table>
      <el-pagination
        background
        :current-page="queryForm.pageNo"
        :page-size="queryForm.pageSize"
        :layout="layout"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import {
    loadDiscoverPoint,
    loadProdevTree,
    saveSelecteRealPoint,
  } from '@/api/Product'

  export default {
    name: 'RoleManagementEdit',
    data() {
      return {
        list: null,
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        elementLoadingText: '正在加载...',
        queryForm: {
          pageNo: 1,
          pageSize: 10,
          productid: '',
          keyword: '',
        },
        title: '添加数据监控',
        dialogFormVisible: false,
        options: [],
        value: '',
        deviceId: '',
        selectlist: [],
        selectlistIds: [],
      }
    },
    created() {
      this.fetchData()
      this.getProduct()
    },
    methods: {
      showEdit(row) {
        this.selectlistIds = []
        this.deviceId = row.deviceId
        this.dialogFormVisible = true
      },
      close() {
        //this.$refs['form'].resetFields()
        //this.form = this.$options.data().form
        this.dialogFormVisible = false
      },
      save() {
        this.selectlist = this.$refs.registTable.selection
        for (var i = 0; i < this.selectlist.length; i++) {
          this.selectlistIds.push(this.selectlist[i].id)
        }
        if (this.selectlistIds.length == 0) {
          this.$baseMessage('未选中任何行', 'error')
          return false
        } else {
          this.saveSelecteRealPoint(this.selectlistIds)
        }
      },
      handleSizeChange(val) {
        this.queryForm.pageSize = val
        this.fetchData()
      },
      handleCurrentChange(val) {
        this.queryForm.pageNo = val
        this.fetchData()
      },
      queryData() {
        this.queryForm.pageNo = 1
        this.fetchData()
      },
      async fetchData() {
        this.listLoading = true
        const { data } = await loadDiscoverPoint(this.queryForm)
        this.list = data.list
        this.total = data.pageInfo.data.totalRows
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
      async getProduct() {
        this.listLoading = true
        const { data } = await loadProdevTree({ product: '1' })
        data.unshift({ id: '', label: '所有产品' })
        this.options = data
        //this.total = data.pageInfo.data.totalRows
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
      async saveSelecteRealPoint(dataid) {
        this.listLoading = true
        const { msg } = await saveSelecteRealPoint({
          discovid: dataid,
          devid: this.deviceId,
        })
        this.$baseMessage(msg, 'success')
        this.$emit('fetch-data', { devid: this.deviceId })
        this.close()
        //this.options = data
        //this.total = data.pageInfo.data.totalRows
        setTimeout(() => {
          this.listLoading = false
        }, 300)
      },
    },
  }
</script>
<style scoped>
  .aaabb /deep/ .el-dialog__body {
    padding-top: 10px;
  }
</style>
